<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>航洋渔业资源管理系统</title>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/reset.css">
    <script src="js/jquery.js"></script>
    <script src="js/axios.js"></script>
    <script src="js/global-axios.js"></script>
    <script src="js/qs.js"></script>
    <script src="js/api.js"></script>

</head>

<body>
    <div id="box">
        <div class="bgimg">
            <div class="center">
                <div class="top">
                    <h1 class="h1">
                        海南城市大脑
                        <small class="small">渔业资源管理系统</small>
                    </h1>
                </div>
                <!-- 登陆 -->
                <div class="land">
                    <div class="land-box1">
                        <div id="land-box-a">账号密码登录</div>
                        <div id="land-box-b">手机号登录</div>
                    </div>
                    <span id="land-sp"></span>
                </div>
                <!-- 登陆结束 -->
                <!--账号密码登陆 -->
                <form class="input" id="LoginUser" name="">
                    <div class="input-box">
                        <div></div>
                        <input type="text" placeholder="请输入账号或手机号码" maxlength="11" class="inp1" id="username" name="username">
                        <div><span class="zero">0</span>/11</div>
                    </div>
                    <div class="pp1">
                        <p class="p p1" style="display: none;">登陆账号不能为空</p>
                        <p class="p p11" style="display: none;">长度在 3 到 15 个字符</p>
                        <p class="p p111" style="display: none;">请输入正确的手机号码</p>
                    </div>
                    <div class="input-box2">
                        <div></div>
                        <input type="password" placeholder="请输入密码" class="inp2" name="password" id="password">
                    </div>
                    <div class="pp2">
                        <p class="p p2" style="display: none;">密码不能为空</p>
                        <p class="p p22" style="display: none;">长度在 3 到 15 个字符</p>
                    </div>
                    <!-- <p class="p p2"  style="display: none;">密码不能为空</p> -->
                    <!-- <div class="dl"> -->
                        <!-- <p class="input-dl">登录</p> -->
                        <button type="submit" class="input-dl">登录</button>
                    <!-- </div> -->
                </form>
                <!-- 账号密码登陆结束 -->
                <!-- 手机号登陆 -->
                <div class="ip">
                    <div class="ip-box">
                        <div></div>
                        <input type="text" placeholder="请输入手机号码" maxlength="11" class="inp1">
                        <div><span class="zero">0</span>/11</div>
                    </div>
                    <div class="pp3">
                        <p class="p p3" style="display: none;">请输入正确的手机号</p>
                        <p class="p p33" style="display: none;">请输入正确的手机号码</p>
                    </div>
                    <div class="ip-box22">
                        <div class="ip-box2">
                            <div></div>
                            <input type="text" placeholder="请输入验证码" class="inp2">
                        </div>
                        <span>获取验证码</span>
                    </div>

                    <div class="pp4">
                        <p class="p p4" style="display: none;">请输入验证码</p>
                        <!-- <p class="p p44" style="display: none;">长度在 3 到 15 个字符</p> -->
                    </div>
                    <div class="dl">
                        <p class="ip-dl">手机登录</p>
                    </div>
                </div>
                <!-- 手机号登陆结束 -->
                <!-- zc -->
                <div class="zc">
                    <div class="wj" id="wj">忘记密码</div>
                    <div><a href="Log.html"> 信息员注册</a></div>
                </div>
                <!-- zc结束 -->
                <!-- 二维码 -->
                <div class="code">
                    <div>
                        <div></div>
                        <p>手机端二维码</p>
                    </div>

                </div>
                <!-- 二维码结束 -->
            </div>
        </div>
        <!-- 背景图片结束 -->
        <!-- 版权 -->
        <div class="floot">
            @copyright 2021 阿里云计算有限公司
        </div>
        <!-- 版权结束 -->

        <!-- 忘记密码 -->
        <div class="big-box">

            <div class="big-ft-box">
                <div class="forget" id="forget">
                    <div class="forget-box">
                        <span id="wj">忘记密码</span>
                        <span class="ft-x" id="ft-x">x</span>
                    </div>
                    <!-- <div class=""> -->
                    <form action="">
                        <div class="dyg">
                            <span class="ft-sp">*</span><span>手机号码</span>
                            <div class="dyg-box">
                                <input type="text" maxlength="11" class="dyg-ipt"><span class="ft1-sp1"><span
                                        class="zero">0</span>/11</span>
                            </div>
                        </div>
                        <div class="pp5">
                            <p class="p p5" style="display: none;">手机号不能为空</p>
                            <p class="p p55" style="display: none;">请输入正确的手机号码</p>
                        </div>
                        <div class="deg">
                            <span class="ft-sp">*</span><span class="ft2-sp1">验证码</span>
                            <input type="text" class="deg-ipt"><span class="ft2-sp2">获取验证码</span>
                        </div>
                        <div class="pp6">
                            <p class="p p6" style="display: none;">验证码不能为空</p>
                        </div>
                        <div class="ft-d1"><span class="ft-sp">*</span><span>密码</span>
                            <input type="text" class="ft-d1-ipt">
                        </div>
                        <div class="pp7">
                            <p class="p p7" style="display: none;">密码不能为空</p>
                            <p class="p p77" style="display: none;">长度大于6位</p>
                        </div>
                        <div class="ft-d2"><span class="ft-sp">*</span><span>确认密码</span>
                            <input type="text" class="ft-d1-ipt2">
                        </div>
                        <div class="pp8">
                            <p class="p p8" style="display: none;">两次输入密码不一致</p>
                        </div>
                    </form>
                    <div class="low">
                        <span class="low-close">关闭</span>
                        <span>修改</span>
                    </div>
                </div>

            </div>
            <!-- 忘记密码结束 -->
            <!-- 忘记密码后的关闭 -->
            <div class="close-box" style="z-index: 10;">
                <div class="close">
                    <div class="cl-0"><span class="cl-0-sp0">x</span></div>
                    <div class="cl-1">
                        <span>确认关闭？</span>
                    </div>
                    <div class="cl-2">
                        <span class="cl-2-no">取消</span>
                        <span class="cl-2-yes">确定</span>
                    </div>
                </div>
            </div>
            <!-- 忘记密码后的关闭结束 -->
        </div>

    </div>
    <script src="js/start.js"></script>
    <script>
        // $('.input-dl').click(function (e) {
        //     debugger
        //     e.preventDefault()
        //     Api.login({
        //         username: $('#username').val(),
        //         password: $('#password').val(),
        //     },null).then(function (res) {
        //         console.log(res)
        //         location.href = 'Map.html'  
        //     })
        // })
        
        $('#LoginUser').on('submit',function (e) {
            debugger
            e.preventDefault()
            Api.login({
                username: $('#username').val(),
                password: $('#password').val(),
            }, 'include.html')
        })
        
    </script>
    
</body>

</html>